<template>

    <div class="my">
        <router-link to="/login">
            <div class="pLogin">
            未登录
        </div>
        </router-link>
        
        <div class="top-bg">

        </div>
        <div class="conten">
            <div class="userInfo">
                <div class="avatar">
                    <img :src="imgUrl">
                </div>
                <div class="userName">
                    {{username}}
                </div>
            </div>
            <div class="userList">
                <ul>
                    <li>我的收藏</li>
                    <li>作者中心</li>
                    <li>用户反馈</li>
                    <li>关于我们</li>
                </ul>
            </div>

        </div>
    </div>
</template>
<style lang="less" scoped>
.my {
    .top-bg {
        height: 200px;
        width: 100%;
        background-color: turquoise;
    }
    .pLogin{
        position: absolute;
        right: 15px;
        top: 10px;
        font-weight: bold;
        font-size: 20px;
    }
    .conten {
        width: 100%;

        .userInfo {
            height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            transform: translateY(-40%);
            border-bottom: 2px solid turquoise;
            .avatar {
                height: 100px;
                width: 100px;
                border-radius: 50%;
                overflow: hidden;

                img {
                    height: 100px;
                    width: 100px;
                }
            }
            .userName{
                font-size: 16px;
                font-weight: bold;
                padding: 5px;
            }
        }
        .userList{
            padding: 5px 10px;
            ul{
                li{
                    margin-bottom: 10px;
                }
            }
        }
    }
}
</style>

<script>
    export default{
        data() {
            return {
                username:'您未登录~',
               imgUrl: require("../assets/mrtx.jpg")
            }
        },
    }
</script>